<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 200px;
				height: 200px;
				background-color: red;
			}


		</style>
	</head>
	<body>

		<div id="box"></div>
		
	</body>
</html>
<script>
	
	// 获取元素
	var boxDiv = document.getElementById('box');

	// boxDiv.addEventListener('mousewheel', function(e) {
	// 	console.log(e);
	// });

	// // FireFox
	// boxDiv.addEventListener('DOMMouseScroll', function(e) {
	// 	console.log(e);
	// });

	function addWheel(obj, func) {

		var index = navigator.userAgent.indexOf("Firefox");
		// 火狐
		if (index != -1) {
			obj.addEventListener('DOMMouseScroll', scroll);

		} else {
			obj.addEventListener('mousewheel', scroll);
		}

		function scroll(e) {
			var direction;
			// 火狐
			if (index != -1) {
				// 往上滚
				direction = e.detail > 0;
			} else {
				direction = e.wheelDelta < 0;
			}

			func(direction);
			e.preventDefault();
		}
	}

	addWheel(boxDiv, function(direction) {

		if (direction) {
			boxDiv.style.width = boxDiv.clientWidth + 2 + 'px';
			boxDiv.style.height = boxDiv.clientHeight + 2 + 'px';
		} else {
			boxDiv.style.width = boxDiv.clientWidth - 2 + 'px';
			boxDiv.style.height = boxDiv.clientHeight - 2 + 'px';
		}

	});








</script>